<template>
  <div id="tjbb-khls">
    <el-select
      style="width: 20vw"
      v-model="selectValueKHBH"
      placeholder="选择客户经理"
      @change="onSelectChange"
    >
      <el-option
        v-for="item in selectOptionsKHBH"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>

    <div id="myChart" :style="{ width: '100%', height: '65vh' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectValueKHBH: null,
      selectOptionsKHBH: null,
      myChart: null,
    };
  },
  mounted: function () {
    this.initAMList();
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById("myChart"));
    //this.initEcharts();
  },
  methods: {
    initAMList() {
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/account-manager/amList",
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据 列表信息
        this.selectOptionsKHBH = response.data.data[0];
      });
    },
    initEcharts(title, dataLV, dataXY, dataMYD) {
      let styleN = {
        normal: {
          label: {
            show: true,
            formatter: "{a}-{b} : {c} 人({d}%)",
          },
          labelLine: { show: true },
        },
      };
      // 绘制图表
      this.myChart.setOption({
        title: { text: title },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} 人({d}%)",
        },
        series: [
          {
            name: "客户等级",
            type: "pie",
            center: ["50%", "30%"],
            radius: "40%",
            data: dataLV,
            roseType: "angle",
            itemStyle: styleN,
          },
          {
            name: "客户信用",
            type: "pie",
            center: ["75%", "70%"],
            radius: "40%",
            data: dataXY,
            roseType: "angle",
            itemStyle: styleN,
          },
          {
            name: "客户满意度",
            type: "pie",
            center: ["25%", "70%"],
            radius: "40%",
            data: dataMYD,
            roseType: "angle",
            itemStyle: styleN,
          },
        ],
      });
    },
    onSelectChange(opt) {
      // console.log("select", opt);
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/statement/loss",
        data: this.$qs.stringify({ id: opt }), //this.$qs.stringify
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据
        let dataLV = [];
        let dataXY = [];
        let dataMYD = [];
        let title = "";
        if (response.data.data[0] != null) {
          const e = response.data.data[0][0];
          e.score[0].forEach((ee) => {
            dataLV.push({ value: ee.count, name: ee.lv });
          });
          e.score[1].forEach((ee) => {
            dataXY.push({ value: ee.count, name: ee.credit });
          });
          e.score[2].forEach((ee) => {
            dataMYD.push({
              value: ee.count,
              name: ee.satisfaction,
            });
          });
          title = "流失客户:" + e.count + "人";
        } else {
          title = "无数据";
        }
        this.initEcharts(title, dataLV, dataXY, dataMYD);
      });
    },
  },
};
</script>

<style></style>
